<template>
  <div>
    <el-row class="row-bg" justify="center">
      <el-col :span="6">
        <h3>欢迎来到登陆界面</h3>
        <img src="@/assets/images/Texas.jpg" style="height: auto;width:auto" alt=""/>
        <p>author:leen</p>
      </el-col>

      <el-col :span="1">
        <el-divider direction="vertical"/>
      </el-col>

      <el-col :span="6">
        <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="rules"
            label-width="80px"
            class="demo-loginForm"
            :size="formSize"
            status-icon
        >
          <el-form-item label="用户名" prop="username" style="width: 380px;">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" style="width: 380px;">
            <el-input v-model="loginForm.password" type="password"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="code" style="width: 380px;">
            <el-input v-model="loginForm.code" style="width: 172px; float: left" maxlength="5"/>
            <img v-bind:src="base64" ref="codeImage" class="CodeImage" alt="" @click="getThe_code"/>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(loginFormRef)">Create</el-button>
            <el-button @click="resetForm(loginFormRef)">Reset</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">

import {onMounted, reactive, ref} from 'vue'
import type {Ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import axios from "axios";
import "../mock/index.js"

const codeImage: Ref<HTMLImageElement | null> = ref(null)
onMounted(() => {
  //the_code.value!!.src = 'src/assets/images/山色.jpg'
  getThe_code()
})

let base64 = ref('')

const getThe_code = () => {
  axios.get('/the_code').then(
      response => {
        if (response.data) {
          console.log("/the_code")
          console.log(response)
          loginForm.token = response.data.data.token
          // codeImage.value!!.src=response.data.data.codeImage

          //console.log(codeImage.value)
          base64.value = response.data.data.codeImage
          loginForm.code = ''
        }
      })
}

const formSize = ref('default')
const loginFormRef = ref<FormInstance>()
const loginForm = reactive({
  username: '',
  password: '',
  code: '',
  token: '',
})

const rules = reactive<FormRules>({
  username: [
    {required: true, message: 'Please input User name', trigger: 'blur'},
    {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'},
  ],
  password: [
    {required: true, message: 'Please input password', trigger: 'blur'},
    {min: 8, max: 16, message: 'Length should be 8 to 16', trigger: 'blur'},
  ],
  code: [
    {required: true, message: 'Please input code', trigger: 'blur'},
    {min: 5, max: 5, message: 'Length should be 5', trigger: 'blur'},
  ],

})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      axios.post('/login', loginForm).then(res => {
        const jwt=res.headers['authorization']
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


Array.from({length: 10000}).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));


</script>

<style scoped>
.el-row {
  color: #fafafa;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.el-col {
  color: #181818;
}

.el-divider {
  height: 250px;
}

.CodeImage {
  float: left;
  height: 30px;
  margin-left: 8px;
  border-radius: 4px;
}
</style>